<template>
<view>
	<!-- 自定义导航栏 fixed-top是吸顶效果  bg-white就是背景白色-->
	<view class="fixed-top bg-white">
		<!-- 最顶部的电池啊，信号啊这些东西所在的那一栏 这里用的是uni-status-bar这个组件，这个组件是uniapp的模版工程里面的 -->
		<uni-status-bar></uni-status-bar>
		<!-- 顶部状态栏   flex布局，给默认下边线，文字垂直居中-->
		<view style="height: 44px;" class="flex border-bottom align-center">
			<!-- 最左边的标题 -->
			<view class="flex-1 flex ">
				
				<!-- 左边的插槽， 留插槽是为了方便引用组件的位置来对插槽位置的内容进行自定义-->
				<slot name="left"></slot>
			</view>
			<view class="flex-1 flex justify-center">
				<!-- 中间部分使用默认插槽 -->
				<slot></slot>
			</view>
			<view class="flex-1 flex justify-end">
				<!-- 右边的插槽 -->
				<slot name="right"></slot>
				
			</view>
		</view>
	</view>
	<!--占位   解决吸顶的图片覆盖下面内容的问题 -->
	<view>
		<!-- 顶部的条子也要占位 -->
		<uni-status-bar></uni-status-bar>
		<!-- 这个是顶部状态栏的占位 -->
		<view class="" style="height: 44px;"></view>
	</view>
</view>
</template>

<script>
	//引入官方组件，处理最顶部的样式  @表示根目录
	import uniStatusBar from "@/components/uni-ui/uni-status-bar/uni-status-bar.vue"
	export default {
		components: {
			uniStatusBar
		},
	}
</script>

<style>
</style>
